<template>
	<div class="app-add-list-table">
		<!--可添加配置、编辑配置 的表格-->
		
		<el-table ref="table" :data="tableData" style="width: 100%">
			
			<el-table-column 
				v-for="item in options.header"
				:type="item.type"
				:key="item.label"
				:prop="item.propName"
				:label="item.label"
				:class-name="item.class"
				:width="item.width"
	      :align="item.align||'center'"
				>
				
				<template slot-scope="scope">
					
					<slot v-if="item.slotName" :scope="scope" :name="item.slotName"></slot>
					<div v-else>
						<span v-if="!listOptions.editDisabled">
							<el-input @change="emitDataChange" v-model="scope.row[item.propName]" type="text"></el-input>
						</span>
						<span v-else>
							{{scope.row[item.propName]}}
						</span>
					</div>
					
				</template>
			</el-table-column>
			
			
			<el-table-column label="操作" width="90px" align="center">
				<template slot-scope="scope">
					
					<el-button size="mini" type="text" 
						v-if="listOptions.btnsConfig['delete'].show(scope.row)"
						@click="handleDelete(scope.$index, scope.row)">
						<i class="iconfont icon-shanchu" style="font-size: 14px;"></i>
					</el-button>
					
				</template>
			</el-table-column>
			
		</el-table>
		
		<el-button
			style="margin-top: 10px;"
			v-if="listOptions.defaultNewRow"
			@click="addTableList">添加一行</el-button>

	</div>
</template>

<script>
	export default {
		name: "addlistTable",
		props: [
			"options",
			"data",
		],
		components: {

		},
		watch:{
			data(n,o){
				console.log(1233,JSON.stringify(n),o)
				if(n&&(n.length||n.length==0)){
					this.tableData =  [...n] ;
				}
				else{
					this.tableData =  [n] ;
				}
				if(!n||!n.length){
					if(this.listOptions.autoAddList){
						this.addTableList();
					}
				}
			}
		},
		data() {
			return {
				listOptions : {
					autoAddList : false , // 默认无数据时添加一行
					editDisabled : false , // 可以编辑
					defaultNewRow : {}, // 新增表数据 
					btnsConfig:{
						"delete" : {
							show : (row)=>{
								return true ;
							},
						},
					}
				},
				tableData: [],
			}
		},
		mounted() {
			this.listOptions = {
				...this.listOptions,
				...this.options,
			};
			if(!this.tableData||!this.tableData.length){
				this.tableData = [
					...this.data,
				];
				if(!this.tableData.length){
					this.addTableList();
				}
			}
			//console.log("mounted" , JSON.stringify(this.tableData) ,JSON.stringify(this.listOptions.defaultNewRow))
		},
		methods: {
			initListData(tableData,b){
				//console.log("加载已有配置到table" , JSON.stringify(tableData) , b)
				if(this.listOptions.autoAddList&&(!tableData||!tableData.length)){
					this.tableData = [];
					this.addTableList();
				}else{
					this.tableData = tableData;
					this.emitDataChange()
				}
				//console.log("table已加载配置" , JSON.stringify(this.tableData),b)
			},
			
			emitDataChange(){
				this.$emit("change","addListTableBySlot",this.tableData)
			},

			handleDelete(index,row){
				this.tableData.splice(index,1)
				this.emitDataChange();
			},
			
			addTableList(){
				if(this.listOptions.defaultNewRow){
					this.tableData.push(JSON.parse(JSON.stringify(this.listOptions.defaultNewRow)))
					//console.log("addTableList" , JSON.stringify(this.tableData))
					// this.emitDataChange()
				}
			},
			
			
		}
	}
</script>

<style lang="scss">
	@import "../../../styles/variables.scss";
	.app-add-list-table {
		line-height: 0;
		
		.el-form-item {
			margin:0;
		}
		.el-form-item__error {
			padding: 0 5px;
			left:auto;
			right: 1px;
			top: 1px;
			line-height: 28px;
			background: #fff;
			color: #f56c6c;
			border-radius: 3px;
		}
	}
</style>